<template>
  <Dialog v-model="show" @confirm="handleSubmit" title="授权" width="500">
    <div class="h-500 overflow-y-auto">
      <el-tree
        ref="treeRef"
        style="max-width: 600px"
        :data="data"
        show-checkbox
        node-key="id"
        :default-checked-keys="defaultCheckedKeys"
        :props="defaultProps"
        @current-change="handleCurrentChange"
        default-expand-all
      />
    </div>
  </Dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import Dialog from "@/components/dialog.vue";

const show = defineModel();
const treeRef = ref();
const data = ref([
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
]);
const defaultCheckedKeys = ref([5, 2]);
const defaultProps = ref({
  children: "children",
  label: "label",
});
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
watch(show, (val) => {
  if (val) {
    // props.data && (formData.value = props.data);
  }
});
const handleSubmit = () => {
  console.log(treeRef.value.getCheckedNodes());
  show.value = false;
};
const handleCurrentChange = (data, node) => {
  console.log(data, node);
};
</script>
<style lang="scss" scoped>
.h-500 {
  height: 360px;
}
</style>
